<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table id="movie">
        <thead>
            <tr>
                <th>电影名字</th>
                <th>电影年份</th>
                <th>星级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-for="(item,index) in items">
            <tr :index="index" >
                <td><span v-show="!item.isEditable">{{item.name}}</span><input type="text" v-model="item.name" v-show="item.isEditable"
                        v-on:blur="blur">
                    </input>
                </td>
                <td><span v-show="!item.isEditable">{{item.year}}</span><input type="text" v-model="item.year" v-show="item.isEditable"
                        v-on:blur="blur"></td>
                <td><span v-show="!item.isEditable">{{item.star}}</span><input type="text" v-model="item.star" v-show="item.isEditable"
                        v-on:blur="blur"></td>
                <th><button v-on:click="update(index)" >修改</button></th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <input type="text" class="movieName"></input>
                    <input type="text" class="movieYear"></input>
                    <input type="text" class="movieStar"></input>
                    <button v-on:click="add">新增</button></td>
            </tr>
        </tfoot>
    </table>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#movie",
            data: {
                counter: 0,
                items: [
                    { name: "电影1", year: "2005", star: 4, isEditable: false },
                    { name: "电影2", year: "2005", star: 2, isEditable: false },
                    { name: "电影3", year: "2005", star: 2, isEditable: false },
                    { name: "电影4", year: "2005", star: 4, isEditable: false },
                    { name: "电影5", year: "2005", star: 2, isEditable: false },
                ]
            },
            methods: {
                update: function (index) {
                    this.items[index].isEditable = true;
                },
                blur: function (e) {
                    var dom = e.target;
                    console.log(dom.parentNode.parentNode);
                    var index=dom.parentNode.parentNode.getAttribute("index");
                    console.log(index);
                    this.items[index].isEditable = false;
                },
                add: function (e) {
                    var movieName = document.getElementsByClassName("movieName")[0].value;
                    var movieYear = document.getElementsByClassName("movieYear")[0].value;
                    var movieStar = document.getElementsByClassName("movieStar")[0].value;
                    this.items.push({ name: movieName, year: movieYear, star: movieStar, isEditable: false })

                }
            }
        })

        //vm.$data=
    </script>
</body>

</html>